<template>
  <div>
    <div class="flex justify-between items-center pr-4 py-2 bg-white">
      <LayoutBreadcrumb class="grow" />
      <!--      <span>-->
      <!--        <a-input v-model:value="keyword" style="width: 220px" placeholder="请输入检测关键字" />-->
      <!--        <a-button type="primary">查询</a-button>-->
      <!--      </span>-->
    </div>
    <div class="mt-2 bg-white p-2">
      <this-search />
    </div>
    <div class="mt-2 px-4 pb-4 bg-white">
      <this-table class="mt-2" @on-setup="showSetup" @on-manual="showManual" />
    </div>
    <setup-modal ref="setupM" />
    <manual-modal ref="manualM" />
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { LayoutBreadcrumb } from '../../../layouts/default/header/components';
import { ref } from 'vue';
import { FileOutlined } from '@ant-design/icons-vue';
import { FileTextOutlined } from '@ant-design/icons-vue';
import thisSearch from './search.vue';
import thisTable from './table.vue';
import setupModal from './setup.vue';
import manualModal from './manual.vue';

export default defineComponent({
  components: {
    LayoutBreadcrumb,
    FileOutlined,
    FileTextOutlined,
    thisSearch,
    thisTable,
    setupModal,
    manualModal,
  },
  setup() {
    const keyword = ref('');
    const setupM = ref();
    const manualM = ref();

    const showSetup = () => {
      setupM.value.open();
    };

    const showManual = () => {
      manualM.value.open();
    };

    return {
      keyword,
      showSetup,
      showManual,
      setupM,
      manualM,
    };
  },
});
</script>
